<div id="wrapper">
  <div class="flex flex-row gap-4">
    <!-- Search -->
    <mat-form-field
      class="search-form-field"
      appearance="outline"
      color="accent">
      <mat-label>{{
        'contract_agreement_page.search_agree' | translate
      }}</mat-label>
      <input matInput [formControl]="searchText" />
      <mat-icon matPrefix>search</mat-icon>
      <button
        *ngIf="searchText.value"
        mat-icon-button
        matSuffix
        (click)="searchText.setValue('')">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <!-- Terminiation status filter -->
    <div class="flex content-end h-[3.25rem] mt-[0.2rem]">
      <mat-button-toggle-group
        name="terminationFilter"
        [formControl]="terminationFilterControl">
        <mat-button-toggle
          value="ONGOING"
          (change)="onTerminationFilterChange()"
          >Active Contracts</mat-button-toggle
        >
        <mat-button-toggle
          value="TERMINATED"
          (change)="onTerminationFilterChange()"
          >Terminated Contracts</mat-button-toggle
        >
        <mat-button-toggle value="all" (change)="onTerminationFilterChange()"
          >All Contracts</mat-button-toggle
        >
      </mat-button-toggle-group>
    </div>

    <!-- Spacer -->
    <div class="grow"></div>

    <!-- Paginator -->
    <mat-paginator
      *ngIf="page.isReady"
      [hidePageSize]="true"
      [disabled]="true"
      [pageSize]="page.data.contractAgreements.length"
      [length]="page.data.numTotalContractAgreements"></mat-paginator>
  </div>

  <div class="flex flex-row justify-center">
    <loading-state *ngIf="page.isLoading" class="min-h-[35rem]"></loading-state>
    <error-state
      *ngIf="page.isError"
      class="min-h-[35rem]"
      [error]="page.errorOrUndefined"></error-state>
    <empty-state
      *ngIf="page.isReady && !page.data.numTotalContractAgreements"
      class="min-h-[35rem]"
      [emptyMessage]="
        'contract_agreement_page.no_agree' | translate
      "></empty-state>
    <empty-state
      *ngIf="
        page.isReady &&
        page.data.numTotalContractAgreements &&
        !(
          page.data.consumingContractAgreements.length +
          page.data.providingContractAgreements.length
        )
      "
      class="min-h-[35rem]"
      [emptyMessage]="
        'contract_agreement_page.no_agree_found' | translate
      "></empty-state>
  </div>

  <div
    *ngIf="page.isReady && !!page.data.contractAgreements.length"
    class="flex flex-col space-y-[20px]">
    <ng-container *ngIf="page.data.consumingContractAgreements.length">
      <horizontal-section-divider
        [text]="'contract_agreement_page.con_agree' | translate">
      </horizontal-section-divider>

      <contract-agreement-cards
        [contractAgreements]="page.data.consumingContractAgreements"
        (contractAgreementClick)="
          onContractAgreementClick($event)
        "></contract-agreement-cards>
    </ng-container>

    <ng-container *ngIf="page.data.providingContractAgreements.length">
      <horizontal-section-divider
        [text]="'contract_agreement_page.prov_agree' | translate">
      </horizontal-section-divider>

      <contract-agreement-cards
        [contractAgreements]="page.data.providingContractAgreements"
        (contractAgreementClick)="
          onContractAgreementClick($event)
        "></contract-agreement-cards>
    </ng-container>
  </div>
</div>
